<template>
  <div>
  <div class='my-project-container'>
    <el-form ref="form" label-width="100px">
      <el-form-item label="项目更新时间">
        <el-date-picker
          v-model="queryParams.beginDateTime"
          style="width: 20%;"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetime"
          placeholder="选择开始时间"
        />
        至
        <el-date-picker
          v-model="queryParams.endDateTime"
          style="width: 20%;"
          type="datetime"
          value-format="yyyy-MM-dd HH:mm:ss"
          :default-time="'23:59:59'"
          placeholder="选择结束时间"
        />
        <el-input
          v-model="queryParams.projectName"
          style="width: 20%; margin-left: 20px;" type="text" placeholder="请输入项目名称"
        />
        <el-button style="margin-left: 20px;" type="primary" @click="queryProjectPage">查询</el-button>
        <el-button style="margin-left: 10px;" @click="$router.push({path:'/project/recycle'})">
          <font-icon class="fas fa-recycle" />
          回收站
        </el-button>
      </el-form-item>
      <el-form-item label="项目状态">
        <el-radio-group v-model="queryParams.status" size="small" @change="()=>{
                        this.queryParams.current=0
                        this.queryProjectPage()
                    }"
        >
          <el-radio-button v-for="status in projectStatusList" :key="status.code" :label="status.code">
            {{ status.name }}
          </el-radio-button>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div class="project-grid-container">
      <div
        v-if="projectList.length"
        v-loading="projectListLoading"
        class="project-grid-view"
      >
        <div v-for="p in projectList" :key="p.id" class="project-grid-item-view pointer">
          <el-row type="flex" align="middle" justify="center">
            <el-col :span="5">
              <span
                :style='getStatusColorStyle(p.status)'
                class="project-grid-view-status"
              />
            </el-col>
            <el-col :span="19">
              <el-tooltip :content="p.projectName" placement="top">
                <p class="project-title">
                  {{ p.projectName }}
                </p>
              </el-tooltip>
            </el-col>
          </el-row>
          <img class="project-grid-view-preimg"
               src="https://freebrio.oss-cn-shanghai.aliyuncs.com/t/pic%20(1).png"
          >
          <p class="project-grid-view-time">创建时间：{{ p.createTime | formatDate }}</p>
          <div class="gird-operating-btns">
            <el-button type="text"   @click="toProjectHandle(p.projectKey,5)">
              <i class="el-icon-edit" />
              编辑
            </el-button>
            <span>
              <el-button
                v-if="p.status!=1" type="text"
              >
                <i class="el-icon-data-analysis" />
                统计
              </el-button>
            </span>
            <el-popconfirm
              v-if="p.status==2"
              title="确定停止收集该项目吗？"
              @confirm='stopProject(p.projectKey)'
            >
              <el-button slot="reference"
                         class="pink-text-btn"
                         type="text"
              >
                <i class="el-icon-video-pause" />
                停止
              </el-button>
            </el-popconfirm>
            <el-popconfirm
              v-if="p.status==3"
              title="确定删除该项目吗？"
              @confirm="deleteProject(p.projectKey)"
            >
              <el-button slot="reference"
                         class="pink-text-btn"
                         type="text"
              >
                <i class="el-icon-delete" />
                删除
              </el-button>
            </el-popconfirm>
          </div>
        </div>
      </div>
      <div v-else v-loading="projectListLoading">
        数据为空
      </div>
    </div>
    <div class="project-page-view">
      <el-pagination
        v-if="total>10"
        background
        :page-size.sync="queryParams.size"
        :current-page.sync="queryParams.pageNum"
        layout="total, prev, pager, next"
        :total="total"
        @current-change="queryProjectPage"
      />
    </div>
  </div>
  </div>
</template>
<script>
import 'font-awesome/css/font-awesome.css'
import dayjs from 'dayjs'

const projectStatusList = [
  { code: 1, name: '未发布', color: '#006EFF' },
  { code: 2, name: '收集中', color: '#34C82A' },
  { code: 3, name: '已结束', color: '#955A45' }
]

export default {
  name: 'MyProject',
  components: {
  },
  filters: {
    formatDate(time) {
      return  dayjs(time).format('YYYY/MM/DD')
    }
  },
  data() {
    return {
      dataShowType: 'grid',
      projectStatusList: projectStatusList,
      total: 0,
      projectList: [
      ],
      projectListLoading: true,
      queryParams: {
        pageNum: 1,
        size: 10,
        isDelete: false,
        projectName: '',
        beginDateTime: null,
        endDateTime: null,
        status: null
      }

    }
  },
  created () {
    this.queryProjectPage()
  },
  methods: {
    switchDataShowTypeHandle(type) {
      this.dataShowType = type
    },
    queryProjectPage () {
      this.$http.post('project/page',
        this.queryParams
      ).then(res => {
        const { list, total, size } = res.data.data
        this.projectList = list
        this.total = total
        this.queryParams.size = 10
        this.projectListLoading = false
      })
    },
    toProjectHandle (projectKey, type) {
      this.$router.push({ path: '/edit', query: { projectKey: projectKey, active: type } })
      console.log(key)
    },
    stopProject (key) {
      console.log(key)
      this.$http.post('/project/stop',{ projectKey: key }).then(res => {
        console.log(res)
        this.$message.success('问卷停止收集成功，可以重新发布哦~')
        this.queryProjectPage()
      })
    },
    deleteProject (key) {
      console.log(key)
      this.$http.post('/project/delete',{ projectKey: key }).then(res => {
        console.log(res)
        this.$message.success('问卷删除成功，可以去回收站回收哦~')
        this.queryProjectPage()
      })
    }
  },
  computed: {
    getStatusColorStyle() {
      return function(code) {
        const color = projectStatusList.find(item => item.code == code).color
        return {
          backgroundColor: color,
          borderColor: color
        }
      }
    }
  }
}
</script>

<style scoped>
.my-project-container {
  display: flex;
  width: 100%;
  overflow: auto;
  flex-direction: column;
  align-items: center;
  align-content: center;
}
.project-grid-container {
  margin-top: 10px;
  display: flex;
  width: 100%;
  justify-content: center;
}
.project-grid-view {
  display: flex;
  width: 950px;
  flex-direction: row;
  flex-wrap: wrap;
}

.project-grid-item-view {
  width: 169px;
  height: 199px;
  line-height: 20px;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 100);
  text-align: center;
  box-shadow: 0 3px 6px 3px rgba(0, 0, 0, 0.12);
  margin: 10px;
  position: relative;
}
.project-title {
  margin: 14px 0px;
  color: rgba(16, 16, 16, 100);
  font-size: 13px;
  text-align: left;
  line-height: 20px;
  max-height: 20px;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.project-grid-view-status {
  display: inline-block;
  width: 7px;
  height: 7px;
  line-height: 20px;
  background-color: rgba(0, 110, 255, 100);
  text-align: center;
  border: 1px solid rgba(0, 110, 255, 100);
  border-radius: 20px;
}


.gird-operating-btns {
  position: absolute;
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: #f0f0f0;
  bottom: 0;
  display: none;
  border: none;
}
.project-grid-item-view:hover .gird-operating-btns {
  display: block;
}
.project-grid-view-preimg {
  width: 143px;
  height: 121px;
}
.project-grid-view-time {
  color: rgba(144, 147, 153, 100);
  font-size: 12px;
  line-height: 20px;
  text-align: center;
  margin: 0;
}

</style>
